<template>
  <div class="main-search">
    <div class="left-form" :style="{ height: thisHeight }">
      <el-form ref="zzSearchForm" :model="searchModel" :label-width="90" inline>
        <el-row>
          <template v-for="item in searchModel.column" :key="item.field">
            <el-col v-if="!item.hidden" :span="item.span || 6">
              <el-form-item :label="item.label">
                <component
                  :is="typeComponentMap[item.type]"
                  :model="searchModel.model[item.field]"
                  :config="item"
                  @update="update"
                ></component>
              </el-form-item>
            </el-col>
          </template>
        </el-row>
      </el-form>
    </div>
    <div class="right-btns">
      <el-space>
        <el-button
          v-if="hasMore"
          circle
          :icon="thisHeight === defaultHeight ? 'ArrowDown' : 'ArrowUp'"
          @click="setHeight"
        ></el-button>
        <el-button type="primary" @click="searchBtn" :loading="loading">{{
          $t("component.search.search_button")
        }}</el-button>
        <el-button @click="resetBtn">
          {{ $t("component.search.reset_button") }}
        </el-button>
        <el-button circle>
          <el-icon @click="setting"><Setting /></el-icon>
        </el-button>
      </el-space>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, watch, markRaw } from "vue";
import { ArrowDown, ArrowUp, Setting } from "@element-plus/icons-vue";
import sInputText from "./components/inputText.vue";
import sInputNumber from "./components/inputNumber.vue";
import sSelectBase from "./components/selectBase.vue";
import sTreeSelect from "./components/treeSelect.vue";
import sDatePicker from "./components/datePicker.vue";
import sTimePicker from "./components/timePicker.vue";
import sSwitchSelect from "./components/switchSelect.vue";

// 定义 props
const props = defineProps({
  searchOptions: {
    type: Object,
    required: true,
  },
  hasMore: {
    type: Boolean,
    default: true,
  },
  loading: {
    type: Boolean,
    default: false,
  },
});

// 定义 emits
const emit = defineEmits(["getSearchData", "resetFields"]);

// 表单引用
const zzSearchForm = ref(null);

// 高度控制
const defaultHeight = ref("34px");
const thisHeight = ref("34px");

// 搜索模型
const searchModel = reactive(props.searchOptions);

// 组件类型映射
const typeComponentMap = {
  inputText: markRaw(sInputText),
  inputNumber: markRaw(sInputNumber),
  selectBase: markRaw(sSelectBase),
  treeSelect: markRaw(sTreeSelect),
  datePicker: markRaw(sDatePicker),
  timePicker: markRaw(sTimePicker),
  switchSelect: markRaw(sSwitchSelect),
};

// 监听 searchOptions 变化
watch(
  () => props.searchOptions,
  (newVal) => {
    if (newVal) {
      Object.assign(searchModel, newVal);
    }
  },
  { deep: true }
);

// 搜索方法
const searchBtn = () => {
  emit("getSearchData", searchModel.model);
};

// 设置高度
const setHeight = () => {
  thisHeight.value =
    thisHeight.value === defaultHeight.value ? "auto" : defaultHeight.value;
};

// 更新组件
const update = (item, value) => {
  searchModel.model[item.field] = value;
};

// 重置按钮
const resetBtn = () => {
  reset();
  emit("resetFields");
};

// 执行重置
const reset = () => {
  // 遍历搜索配置，根据字段类型进行重置
  searchModel.column.forEach((column) => {
    const field = column.field;
    const fieldType = column.type;

    // 根据组件类型设置默认值
    switch (fieldType) {
      case "switchSelect":
        // switch组件重置为false
        searchModel.model[field] = false;
        break;
      case "selectBase":
      case "treeSelect":
        // 选择器组件重置为空字符串或null
        searchModel.model[field] = column.multiple ? [] : "";
        break;
      case "datePicker":
        // 日期选择器根据类型重置
        const isRange = [
          "daterange",
          "datetimerange",
          "monthrange",
          "yearrange",
        ].includes(column.dateType);
        searchModel.model[field] = isRange ? [] : "";
        break;
      case "timePicker":
        // 时间选择器根据类型重置
        const isTimeRange = [
          "timerange",
          "timerange-short",
          "timerange-12h",
        ].includes(column.timeType);
        searchModel.model[field] = isTimeRange ? [] : "";
        break;
      case "inputText":
      case "inputNumber":
      default:
        // 文本输入框重置为空字符串
        searchModel.model[field] = "";
        break;
    }
  });
};

// 设置
const setting = () => {
  console.log("todo...");
};

// 暴露方法给父组件
defineExpose({
  searchBtn,
  resetBtn,
  reset,
  searchModel,
});
</script>

<style scoped lang="less">
.main-search {
  display: flex; // 将其子元素设置为弹性盒子模型，使其子元素在水平方向上排列

  .left-form {
    flex: 1; // 弹性尺寸设置为1，使其在水平方向上自动拉伸，占据剩余空间
    overflow: hidden;
    align-self: center; // 交叉轴方向（纵向）居中对齐

    :deep(.el-form-item) {
      width: 100%;
      margin-bottom: 6px !important;

      .el-form-item__label {
        padding: 0;
        justify-content: center;
      }
    }
  }

  .right-btns {
    margin-top: 0px;
    margin-left: 10px;
  }
}

:deep(.el-col) {
  min-width: 240px !important;
}
</style>
